<template>
  <div class="unit-block home-section pt-63px pb-72px">
    <div class="home-title">联盟单位</div>
    <div class="units flex flex-wrap justify-center mt-45px mb-48px mx-150px">
      <img
        v-for="unit in unitList"
        :key="unit.id"
        :src="unit.linkPicUrl"
        class="w-200px h-84px mb-24px mr-20px"
        :class="{ 'cursor-pointer': unit.openUrl }"
        @click="openLink(unit.openUrl)"
      />
    </div>
  </div>
</template>

<script setup>
import { useConfigStore } from "@/store";

const configStore = useConfigStore();
const unitList = computed(
  () => configStore.configList?.unitList.slice(0, 12) || []
);

const openLink = (url) => {
  if (!url) return;
  window.open(url);
};
</script>

<style lang="less" scoped>
.unit-block {
  background: @bg-color;
  .units {
    width: @content-width;
  }
}
</style>
